<template>
  <basic-container v-loading="loading">
    <div class="wrpa">
      <div id="header">
        <div class="header bgd-f6" v-if="query.dayProfit">
          {{ query.dayProfit }}
        </div>
        <div class="header bgd-f6" v-if="query.monthProfit">
          {{ query.monthProfit }}
        </div>
        <div class="header bgd-f6" style="border-top: none">
          {{ query.nameTitle }}
        </div>
      </div>
      <div class="w1202">
        <div class="tabWrap">
          <div class="line">
            <div class="bgd-f6 line-time">通道名称</div>
            <div class="bgd-f6 line-time">支付方式</div>
            <div class="bgd-f6 line-time">卡类型</div>
            <div class="bgd-f6 line-time">总交易金额</div>
            <div class="bgd-f6 line-time">总交易笔数</div>
            <div class="bgd-f6 line-time">总交易手续费</div>
            <div class="bgd-f6 line-time">总垫资手续费</div>
            <div class="bgd-f6 line-time">总增收手续费</div>
            <div class="bgd-f6 line-time">总提现手续费</div>
            <div class="bgd-f6 line-time">总手续费</div>
            <div class="bgd-f6 line-time">机构交易分润</div>
            <div class="bgd-f6 line-time">机构垫资分润</div>
            <div class="bgd-f6 line-time">机构总分润</div>
            <div class="bgd-f6 line-time">本级交易收益</div>
            <div class="bgd-f6 line-time">本级垫资收益</div>
            <div class="bgd-f6 line-time">本级总收益</div>
          </div>
          <div class="">
            <div v-if="dataList.length>0">
              <div class="line" v-for="item in dataList" :key="item.aisleCode">
              <!-- 通道 -->
              <div class="line-time bgd-f6 flex-j-a" style="width: 150px">
                <div>{{ item.aisleName }}</div>
              </div>
              <div class="w1950">
                <div
                  class="line"
                  v-for="compList in item.productList"
                  :key="compList.compName"
                >
                  <!-- 支付方式 -->
                  <div class="line-time flex-j-a">
                    <div>{{ compList.prodName }}</div>
                  </div>
                  <div class="w1800">
                    <div
                      v-for="cardTypeList in compList.tradeListList"
                      :key="cardTypeList.cardType"
                    >
                      <div class="flex">
                        <!-- 卡类型 -->
                        <div class="line-time flex-j-a">
                          <div>{{ cardTypeList.cardTypeName }}</div>
                        </div>
                        <div class="line-time">
                          {{ exhibition(cardTypeList.tradeAmount) }}
                        </div>
                        <!-- 总交易金额 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.tradeCount) }}
                        </div>
                        <!-- 总交易笔数 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.totalHandling) }}
                        </div>
                        <!-- 总交易手续费 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.totalHandlingD0) }}
                        </div>
                        <!-- 总垫资手续费 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.incrementFee) }}
                        </div>
                        <!-- 总增收手续费 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.withdrawalFee) }}
                        </div>
                        <!-- 总提现手续费 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.allTotalHandling) }}
                        </div>
                        <!-- 总手续费 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.childHandlingProfit) }}
                        </div>
                        <!-- 机构交易分润 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.childHandlingProfitD0) }}
                        </div>
                        <!-- 机构垫资分润 -->
                        <div class="line-time">
                          {{ exhibition(cardTypeList.childAllProfitAmount) }}
                        </div>
                        <!-- 机构总分润 -->
                        <div class="line-time">{{ exhibition(cardTypeList.handlingProfit) }}</div>
                        <!-- 本级交易收益 -->
                        <div class="line-time">{{ exhibition(cardTypeList.handlingProfitD0) }}</div>
                        <!-- 本级垫资收益 -->
                        <div class="line-time">{{ exhibition(cardTypeList.allProfitAmount) }}</div>
                        <!-- 本级总收益 -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <div class="line">
              <div class="bgd-f6 line-time lineW3">合计</div>
              <div class="line-time">{{ exhibition(countData.totalTradAmount) }}</div>
              <!-- 总交易金额 -->
              <div class="line-time">{{ exhibition(countData.tradeCount) }}</div>
              <!-- 总交易笔数 -->
              <div class="line-time">{{ exhibition(countData.totalRFee) }}</div>
              <!-- 总交易手续费 -->
              <div class="line-time">{{ exhibition(countData.totalRFeeD0) }}</div>
              <!-- 总垫资手续费 -->
              <div class="line-time">{{ exhibition(countData.incrementFee) }}</div>
              <!-- 总增收手续费 -->
              <div class="line-time">{{ exhibition(countData.withdrawalFee) }}</div>
              <!-- 总提现手续费 -->
              <div class="line-time">{{ exhibition(countData.allTotalHandling) }}</div>
              <!-- 总手续费 -->
              <div class="line-time">{{ exhibition(countData.totalChildProfitAmount) }}</div>
              <!-- 机构交易分润 -->
              <div class="line-time">{{ exhibition(countData.totalChildProfitAmountD0) }}</div>
              <!-- 机构垫资分润 -->
              <div class="line-time">{{ exhibition(countData.allChildProfitAmoun) }}</div>
              <!-- 机构总分润 -->
              <div class="line-time">{{ exhibition(countData.totalProfitAmount) }}</div>
              <!-- 本级交易收益 -->
              <div class="line-time">{{ exhibition(countData.totalProfitAmountD0) }}</div>
              <!-- 本级垫资收益 -->
              <div class="line-time">{{ exhibition(countData.allProfitAmount) }}</div>
              <!-- 本级总收益 -->
            </div>
          </div>
        </div>
      </div>
      
      <el-button type="primary" class="btnFooter" @click.stop="handleExport">下载{{ title(type) }}</el-button>
    </div>
  </basic-container>
</template>

<script>
import {getListNew as childDayList ,getListCount as childDayCount, getExportNew as childDayExport} from "@/api/rb-oem/childOemProfit/service_profit_day";
import {getListNew as childMonthList ,getListCount as childMonthCount, getExportNew as childMonthExport} from "@/api/rb-oem/childOemProfit/service_profit_month";
import { downloadFileExcel } from "@/util/util";
export default {
  data() {
    return {
      type: "",
      loading: true,
      query: {}, //查询
      dataList: {}, //查询结果
      countData: {}, //统计
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == undefined) {
          return (val = "0.00");
        } else {
          return val;
        }
      };
    },
    // 标题
    title() {
      return (type) => {
        if(type == 'childDay'){
          return '机构日分润汇总报表';
        }else if(type == 'childMonth'){
          return '机构月分润汇总报表';
        } else {
          return "分润汇总报表";
        }
      };
    },
    getTitle() {
      return (type) => {
        if(type == 'childDay'){
          return '机构日分润汇总报表';
        }else if(type == 'childMonth'){
          return '机构月分润汇总报表';
        } else {
          return "";
        }
      };
    },
  },
  created() {
    this.type = this.$route.query.type;
    this.onLoad();
  },
  methods: {
    onLoad() {
      this.loading = true;
      let _this = this;
      _this.query = _this.$route.query;

      if(_this.type == 'childDay'){
        childDayList(-1,-1,_this.query).then((res) => {
          _this.dataList = res.data.data;
          _this.loading = false;
        });

        // 获取统计
        childDayCount(_this.query).then((res) => {
          _this.countData = res.data.data;
          _this.loading = false;
        });
      }else if(_this.type == 'childMonth'){
        childMonthList(-1,-1,_this.query).then((res) => {
          _this.dataList = res.data.data;
          _this.loading = false;
        });

        // 获取统计
        childMonthCount(_this.query).then((res) => {
          _this.countData = res.data.data;
          _this.loading = false;
        });
      }
    },

    handleExport() {
      this.$confirm(`是否下载${this.title(this.type)}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.type == "childDay") {
          childDayExport(this.query).then(
            (res) => {
              downloadFileExcel(res);
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else if (this.type == "childMonth") {
          childMonthExport(this.query).then(
            (res) => {
              downloadFileExcel(res);
            },
            (error) => {
              window.console.log(error);
            }
          );
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
#header{
  //width: 1202px;
  box-sizing: border-box;
}
.wrpa {
  position: relative;
  overflow: hidden;
  //width: 1202px;
  margin: 0 auto;
}

.w1202 {
  overflow-x: scroll;

  box-sizing: border-box;
  .tabWrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
    position: relative;
  }
  .postionBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.w1950 {
  // width: 1950px;
  width: calc(100% - 150px);
  box-sizing: border-box;
}
.w1800 {
  // width: 1800px;
  width: calc(100% - 300px);
  box-sizing: border-box;
}
.flex {
  display: flex;
}
.flex_d_c {
  flex-direction: column;
}
.flex_wrap {
  flex-wrap: wrap;
}

.flex-j-a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgd-f6 {
  background-color: #f6f6f6;
}
.header {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #ccc;
  line-height: 50px;
}
.line {
  // width: 100%;
  display: flex;
  // justify-content: space-between;
  box-sizing: border-box;

  .line-time {
    box-sizing: border-box;
    min-width: 150px;
    text-align: center;
    border: 1px solid #ccc;
    border-top: none;
    border-right: none;
    line-height: 50px;
  }
  .line-time:last-child {
    border-right: 1px solid #ccc;
  }
  .lineW3 {
    min-width: 450px !important;
  }
  // .line-time:nth-child(2),.line-time:nth-child(3),.line-time:nth-child(4){
  //   border-left: none;
  // }
}
.btnFooter {
  display: block;
  margin: 30px auto 10px;
}
</style>
